<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="includes.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<% String basePath = request.getContextPath();%>
<% String baseCSSPath = request.getContextPath()+"/resources/css";%>
<% String baseJSPath = request.getContextPath()+"/resources/js";%>
<% String baseImagePath = request.getContextPath()+"/resources/images";%>

<title>${product.productName}</title>

<link href="<%=baseImagePath %>/favicon.png" rel="icon">

<link href="<%=baseCSSPath %>/stylesheet.css" rel="stylesheet" type="text/css" />
<script src="<%=baseJSPath %>/jquery-1.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/cloud-zoom.js" type="text/JavaScript" ></script>
<script src="<%=baseJSPath %>/jquery_004.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/script.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/common.js" type="text/javascript" ></script>

<script language="javascript">
	
var jsproductInstanceList = new Array();

<c:forEach var="productInstance" items="${product.productInstanceList}">
	var innerProductInstance = new Array();
	innerProductInstance.push('${productInstance.colorId}');
	innerProductInstance.push('${productInstance.sizeId}');
	innerProductInstance.push('${productInstance.quantity}');
	jsproductInstanceList.push(innerProductInstance);
</c:forEach>

var color='';
var size='';
var color_value='';
var size_value='';
var submit_flag = false;

</script>

<style>
table.productDescription{
		padding: 1px;
		margin: 2px;
}

table.productDescription tr{
	padding: 3px;
	text-align:left;
}

table.productDescription tr td{
padding-bottom: 18px;
}


div.option {
		padding: 1px;
		margin: 2px;
		text-align:center;
		font-size:80%;
		float:left;
	}
	
	div.option a {
		border: 1px solid  ;
		margin-right:2px;
		padding:3px 5px;
		background-position:bottom;
		text-decoration: none;
	}
	
	div.optionColor a {
		border: 1px solid  ;
		margin-right:2px;
		padding:3px 5px;
	 
	    height:25px;
	    width:40px;
		background-position:bottom;
		text-decoration: none;

	}
	div.option a:hover, div.meneame a:active {
		border: 1px solid  ;
		background-image:none;
		background-color: #E87373;
		color: #494040;
	}
	div.option a.current {
		margin-right:2px;
		padding:3px 5px;
		border: 1px solid  ;
		font-weight: bold;
		background-color: #E87373;
		color: #494040;
		pointer-events: none;
	}
	div.option a.disabled {
		pointer-events: none;
	}
	
	.colorDiv {
		float:left; 
		border:1px solid #CDCBC4;
		margin-right:5px;
		text-align:center;
		width:40px;
		height:25px;
	}
	
	.colorDiv_selected {
		float:left; 
		border:1px solid black;
		margin-right:5px;
		text-align:center;
		width:40px;
		height:25px;
	}

</style>

</head>

<body data-twttr-rendered="true" class="product-product">

<div class="main-shining">	
<p style="display: none;" id="back-top"> <a href="#top"><span></span></a> </p>
<div class="row-1">
  <%@ include file="header.jsp" %>
 </div>
<div id="container">

   <div id="notification"> </div>
   <div id="column-left">
	   <%@ include file="navMenu.jsp" %>
   </div>
 
<c:if test="${product!=null}">
<div id="content" style="min-height:1050px;"> 

 <div class="breadcrumb">
        <a href="<%=basePath %>/home.html">首页</a>
         &gt;&gt;<a class="last" href="#">${product.productName}</a>
      </div>
  
<div class="product-info" >
    <div class="wrapper indent-bot">
        <div class="fleft left spacing">
          
          <c:forEach var="image" items="${product.regularImagelist}" varStatus="status">   
          <c:if test="${status.count==1}">                                 
	          <div class="image"> 
	          <div id="wrap" style="top:0px;z-index:9999;position:relative;">
	          <a style="position: relative; display: block;" href="" title="Lorem ipsum dolor sit" class="cloud-zoom" id="zoom1" rel="position: 'right'">
	          <img id="main_image_display" style="display: block;" src="<%=basePath %>/image_upload/${image.path}" title="${product.productName}" alt="${product.productName}">
	          </a>
	          <div class="cloud-zoom-lens" style="z-index: 98; position: absolute; width: 181.3px; height: 255.433px; opacity: 0.111038; left: 50px; top: 0px; background-position: -50px 0px;">
	          </div>
	          
	          <div class="mousetrap" style="background-image: url(&quot;.&quot;); z-index: 999; position: absolute; width: 259px; height: 388px; left: 0px; top: 0px; cursor: move;"></div>
	          
	          </div>             
	          </div>
	          </c:if>
          </c:forEach>
         
         <div class="image-additional">
             <c:forEach var="image" items="${product.regularImagelist}" varStatus="status">  
		        <a href="" title="${product.productName}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '<%=basePath %>/image_upload/${image.path}' "><img  width="70" height="85" src="<%=basePath %>/image_upload/${image.path}" title="${product.productName}" alt="${product.productName}"></a>
             </c:forEach>
         </div>
                         
        </div>
        
        <div class="extra-wrap">
		      <h1>${product.productName} </h1>
		<div class="description">
		
		<table class="productDescription">
			
			<tr>
			   <td style="width:20%;"><span class="text-price">价格:</span> </td>
			   <td><span class="price-new">¥ ${product.discountPrice}</span><span class="price-old">¥ ${product.globalprice}</span></td>
			</tr>
			
			<tr>
			   <td style="width:20%;"><span class="text-price">Brand:</span> </td>
			   <td><span> ${product.category.categoryName}</span></td>
			</tr>
			
			<tr>
			   <td style="width:20%;">是否有货: </td>
			   <td style="padding-bottom: 10px;"><div class="prod-stock">In Stock</div></td>
			</tr>
			
		    <tr>
			   <td ><span class="text-price">颜色:</span> </td>
			   <td>
			       <div id="optionColor" class="optionColor"> 
			        <c:forEach var="colorOption" items="${colorOptionValueList}">
			        <div class="colorDiv" id="${colorOption.optionValueId}" title="${colorOption.displayValue}" style="background-color:${colorOption.optionValue};">
			         
			        </div>
			        </c:forEach>
		           </div>
		       </td>
			</tr>
			<tr>
			   <td><span class="text-price">大小:</span> </td>
			   <td>
			       <div id="optionSize" class="option"> 
			        <c:forEach var="sizeOption" items="${sizeOptionValueList}">
						<div class="sizeDiv" id="${sizeOption.optionValueId}" title="${sizeOption.displayValue}" style="float:left; border:1px solid #CDCBC4;margin-right:5px;padding-top:5px;text-align:center;width:50px;height:28px;">
				         ${sizeOption.displayValue}
				        </div>
			        </c:forEach>
		           </div>
		       </td>
			</tr>
			
			<script>

			   var hint_msg = "您选择了 ";
			    function changeTheQuantiy(){
				for (var t = 0; t < jsproductInstanceList.length; t++) {
			        var innerProductInstance = jsproductInstanceList[t];
					if((jsproductInstanceList[t][0]==color) && (jsproductInstanceList[t][1]==size)){
						document.getElementById("quantityLable").innerHTML = jsproductInstanceList[t][2];
						submit_flag = true;
						return;
					}
					submit_flag = false;
					document.getElementById("quantityLable").innerHTML = '<font color=red>对不起，你所选择的颜色和尺码暂时缺货</font>';
					document.getElementById("hint_msg").innerHTML = hint_msg +color_value+", " +size_value;
			 	}
			}
			
				$("div.colorDiv").hover(
				  function () {
					  $(this).css('cursor','pointer');
				  }, 
				  function () {
					  $(this).css('cursor','auto');
				  }
				);

				$("div.sizeDiv").hover(
						  function () {
							  $(this).css('cursor','pointer');
						  }, 
						  function () {
							  $(this).css('cursor','auto');
						  }
				);

				$("div.colorDiv").click(
						function () {
							var divs =  $(this).parent().find('div.colorDiv');
							for(var i=0;i<divs.length;i++){
								$(divs[i]).css('border','1px solid #CDCBC4');
								//$(divs[i]).css('opacity','0.3');
							}
							$(this).css('border','2px solid black');
							color = this.id;
							color_value = this.title;
							if(color!='' && size!=''){
								changeTheQuantiy();
							}
						}	
				);

				$("div.sizeDiv").click(
						function () {
							var divs =  $(this).parent().find('div.sizeDiv');
							for(var i=0;i<divs.length;i++){
								$(divs[i]).css('border','1px solid #CDCBC4');
								//$(divs[i]).css('opacity','0.3');
							}
							$(this).css('border','2px solid black');
							size=this.id;
							size_value = this.title;
							if(color!='' && size!=''){
								changeTheQuantiy();
							}
						}	
				);

			</script>
			
			<tr>
			   <td><span class="text-price">数量:</span> </td>
			   <td>
			       <div class="cart-top">
			            <div class="cart-top-padd">
			                <input name="quantity" size="2" value="1" type="text"> (库存: <span id="quantityLable" style="font-size:12px;color:black">${product.totalQuantity}</span> )
			                <br><span id="hint_msg" style="font-size:12px;color:black"></span>
			                <input name="product_id" size="2" value="47" type="hidden">
			            </div>
			            
			       </div>
		       </td>
			</tr>
			
			<tr>
			   <td></td>
			   <td align="right">
			       <a id="button-cart" class="button-prod"  onclick="addToCart(${product.productId},'<%=basePath %>/image_upload/${product.smallImage.path}');">加入购物车</a>
		       </td>
			</tr>
			
		      
</table>
		      </div>
		              
		      <div class="review">
					<div>
						<img src="detail_files/stars-0.png" alt="0 reviews">&nbsp;&nbsp;
							<div class="btn-rew">
								<a onclick="$('a[href=\'#tab-review\']').trigger('click');">0 评价</a>&nbsp;&nbsp;|&nbsp;&nbsp;
								<a onclick="$('a[href=\'#tab-review\']').trigger('click');">添加您的评价</a>
							</div>
					</div>
			 </div>
		           
		   </div>
		          
	 </div>
  </div>
  
<div class="wrapper mb-1">
  <div id="tabs" class="htabs">
        <a class="selected" style="display: inline;" href="#tab-description">商品详细信息</a>
  </div>
</div>

<div class="wrapper">
    <div style="display: block;" id="tab-description" class="tab-content">
		  
		  <div class="std">
			<p>
				${product.productDescription}
		    </p>
		  </div>
	</div>
</div>

</div>


<div class="related ">
    <div class="box-heading">推荐商品</div>
    <div class="box-product"> 
      <ul>
		    <c:forEach var="product" items="${featuredProductList}" varStatus="status">
		   			 <c:if test="${status.count<=5}">
					      <li class="related-info">
				                <div class="image"><a href="<%=basePath %>/product/productDetail.html?productId=${product.productId}"><img id="img_35" src="<%=basePath %>/image_upload/${product.smallImage.path}" alt="${product.productName}"></a></div>
				                <div class="name"><a href="<%=basePath %>/product/productDetail.html?productId=${product.productId}">${product.productName}</a></div>
		                                    <div class="price">
		                                          <span class="price-new">¥ ${product.discountPrice}</span><span class="price-old">¥ ${product.globalprice}</span>
		                                          <div class="rating"></div>
		                                    </div>
		                                   <div class="cart"><a href="<%=basePath %>/product/productDetail.html?productId=${product.productId}"  class="button"><span>View Details</span></a></div>
		    
		                               </li>
					</c:if>
			</c:forEach>
       </ul>
    </div>
  </div>
    </c:if>
    
    
    
    <c:if test="${product==null}">
        <center>  <font color="red">Sorry , the record can not be found!</font> </center>
    </c:if>

<script type="text/javascript"><!--
 function addToCart(productId, imagePah) {
	if(color=='' || size==''){
		$('#notification').html('<div class="success" style="display: none;"> 提交之前，请选择颜色和大小！<span><img src="/CommerceFrame/resources/images/close.png" alt="" class="close" /></span></div>');
		$('.success').fadeIn('slow');
		return;
	}
	if(!submit_flag){
		$('#notification').html('<div class="success" style="display: none;"> <font color=red>对不起，你所选择的颜色和尺码暂时缺货, 请选择其他的颜色或尺码！</font><span><img src="/CommerceFrame/resources/images/close.png" alt="" class="close" /></span></div>');
		$('.success').fadeIn('slow');
		return;
	}
	$.ajax({
		url: '/CommerceFrame/shoppingCart/addToCart.html',
		type: 'post',
		data: { productId: productId, colorId:color, sizeId:size, quantity:1 },
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();
			
			if (json['error']) {
					$('#notification').html('<div class="success" style="display: none;">' + json['error'] + '<span><img src="/CommerceFrame/resources/images/close.png" alt="" class="close" /></span></div>');
					$('.success').fadeIn('slow');
			} 
			
			if (json['success']) {
				$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<span><img src="/CommerceFrame/resources/images/close.png" alt="" class="close" /></span></div>');
				$('.success').fadeIn('slow');
				$('#cart-total').html(json['total']);
			}	
		}
	});

	
}
 
//--></script>
 
</div>
     <div class="footer-wrap">
	    <%@ include file="footer.jsp" %>
     </div>
</div>

</body>
</html>